<template>
    <el-card>
        <div class="header-bar">
            <span class="title">产品与工装夹具管理</span>
            <el-input v-model="search.keyword" placeholder="名称/品牌/型号" size="small"
                style="width:180px;margin-right:10px;" clearable />
            <el-select v-model="search.type" placeholder="类型" size="small" style="width:120px;margin-right:10px;"
                clearable>
                <el-option label="产品" value="产品" />
                <el-option label="工装夹具" value="工装夹具" />
            </el-select>
            <el-button type="primary" size="small" @click="onAdd">新增</el-button>
        </div>
        <el-table :data="filteredList" border style="width:100%;margin-top:16px;" height="500px"
            :row-key="row => row.id">
            <el-table-column prop="id" label="编号" width="130" />
            <el-table-column prop="name" label="名称" min-width="120" />
            <el-table-column prop="type" label="类型" width="100" />
            <el-table-column prop="brand" label="品牌" width="100" />
            <el-table-column prop="model" label="型号" width="110" />
            <el-table-column prop="qty" label="数量" width="80" />
            <el-table-column prop="status" label="状态" width="90" />
            <el-table-column label="图片" width="80">
                <template #default="{ row }">
                    <el-image v-if="row.img" :src="row.img" fit="cover"
                        :style="{ width: '36px', height: '36px', borderRadius: '6px' }" preview-teleported />
                </template>
            </el-table-column>
            <el-table-column prop="desc" label="描述" min-width="140" />
            <el-table-column label="操作" width="180">
                <template #default="{ row }">
                    <el-button size="small" @click="onEdit(row)">编辑</el-button>
                    <el-button size="small" type="danger" @click="onDelete(row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 新增/编辑弹窗 -->
        <el-dialog v-model="editVisible" :title="editForm.id ? '编辑' : '新增'">
            <el-form :model="editForm" label-width="80px">
                <el-form-item label="编号">
                    <el-input v-model="editForm.id" />
                </el-form-item>
                <el-form-item label="名称">
                    <el-input v-model="editForm.name" />
                </el-form-item>
                <el-form-item label="类型">
                    <el-select v-model="editForm.type">
                        <el-option label="产品" value="产品" />
                        <el-option label="工装夹具" value="工装夹具" />
                    </el-select>
                </el-form-item>
                <el-form-item label="品牌">
                    <el-input v-model="editForm.brand" />
                </el-form-item>
                <el-form-item label="型号">
                    <el-input v-model="editForm.model" />
                </el-form-item>
                <el-form-item label="数量">
                    <el-input-number v-model="editForm.qty" :min="0" />
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="editForm.status">
                        <el-option label="正常" value="正常" />
                        <el-option label="停用" value="停用" />
                        <el-option label="损坏" value="损坏" />
                    </el-select>
                </el-form-item>
                <el-form-item label="图片">
                    <el-input v-model="editForm.img" placeholder="图片URL" />
                </el-form-item>
                <el-form-item label="描述">
                    <el-input v-model="editForm.desc" type="textarea" />
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="editVisible = false">取消</el-button>
                <el-button type="primary" @click="onSave">保存</el-button>
            </template>
        </el-dialog>
    </el-card>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const list = ref([
  // 产品类
  { id: 'P-0001', name: '心电监护仪', type: '产品', brand: '迈瑞', model: 'BeneHeart D3', qty: 5, status: '正常', img: '', desc: '主要用于重症监护' },
  { id: 'P-0002', name: '输液泵', type: '产品', brand: '威高', model: 'WG-500', qty: 12, status: '正常', img: '', desc: '普遍用于病房' },
  { id: 'P-0003', name: '注射泵', type: '产品', brand: '新华', model: 'ZH-100', qty: 6, status: '正常', img: '', desc: '' },
  { id: 'P-0004', name: '呼吸机', type: '产品', brand: '飞利浦', model: 'V60', qty: 4, status: '正常', img: '', desc: 'ICU常用设备' },
  { id: 'P-0005', name: '彩超仪', type: '产品', brand: '东软', model: 'NS900', qty: 2, status: '正常', img: '', desc: '超声诊断用' },
  { id: 'P-0006', name: '血液透析机', type: '产品', brand: '贝朗', model: 'Dialog+', qty: 3, status: '停用', img: '', desc: '需定期维护' },
  { id: 'P-0007', name: '化学发光分析仪', type: '产品', brand: '西门子', model: 'ADVIA Centaur', qty: 1, status: '正常', img: '', desc: '' },
  { id: 'P-0008', name: '移动DR', type: '产品', brand: '联影', model: 'uDR370i', qty: 2, status: '正常', img: '', desc: '急诊拍片' },
  { id: 'P-0009', name: '麻醉机', type: '产品', brand: '迈瑞', model: 'WATO EX-35', qty: 2, status: '损坏', img: '', desc: '待维修' },
  { id: 'P-0010', name: '便携式B超', type: '产品', brand: 'GE', model: 'LOGIQ e', qty: 2, status: '正常', img: '', desc: '' },

  // 工装夹具类
  { id: 'J-0001', name: '多功能手术夹具', type: '工装夹具', brand: '华仪', model: 'HY-200A', qty: 4, status: '正常', img: '', desc: '手术室夹具' },
  { id: 'J-0002', name: '输液管夹具', type: '工装夹具', brand: '康健', model: 'KJ-01', qty: 20, status: '正常', img: '', desc: '日常护理' },
  { id: 'J-0003', name: '采血管支架', type: '工装夹具', brand: '迪瑞', model: 'SR-500', qty: 8, status: '正常', img: '', desc: '' },
  { id: 'J-0004', name: '呼吸管固定夹', type: '工装夹具', brand: '德恩', model: 'DE-13', qty: 10, status: '正常', img: '', desc: 'ICU使用' },
  { id: 'J-0005', name: '电极片安装夹具', type: '工装夹具', brand: '迈瑞', model: 'MY-EJ', qty: 15, status: '正常', img: '', desc: '' }
])


const search = reactive({ keyword: '', type: '' })
const filteredList = computed(() => {
    return list.value.filter(row => {
        const matchKey =
            !search.keyword ||
            row.name.includes(search.keyword) ||
            row.brand.includes(search.keyword) ||
            row.model.includes(search.keyword)
        const matchType = !search.type || row.type === search.type
        return matchKey && matchType
    })
})

const editVisible = ref(false)
const editForm = reactive({
    id: '',
    name: '',
    type: '产品',
    brand: '',
    model: '',
    qty: 1,
    status: '正常',
    img: '',
    desc: ''
})

function onAdd() {
    Object.assign(editForm, {
        id: '',
        name: '',
        type: '产品',
        brand: '',
        model: '',
        qty: 1,
        status: '正常',
        img: '',
        desc: ''
    })
    editVisible.value = true
}
function onEdit(row) {
    Object.assign(editForm, row)
    editVisible.value = true
}
function onSave() {
    if (!editForm.id || !editForm.name) {
        ElMessage.warning('编号和名称必填')
        return
    }
    const idx = list.value.findIndex(item => item.id === editForm.id)
    if (idx !== -1) {
        list.value[idx] = { ...editForm }
        ElMessage.success('编辑成功')
    } else {
        list.value.push({ ...editForm })
        ElMessage.success('新增成功')
    }
    editVisible.value = false
}
function onDelete(row) {
    list.value = list.value.filter(item => item.id !== row.id)
}
</script>

<style scoped>
.header-bar {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.title {
    font-size: 20px;
    font-weight: bold;
    margin-right: 20px;
}
</style>
